<template>
  <div class="magicChange">
    <el-collapse v-model="activeNames1">
      <el-collapse-item title="内容" name="1">
        <ul class="content-list">
          <li>
            <span>魔方样式：</span>
            <div>
              <div class="margic-type">
                <el-radio style="width:55px" v-model="styles.type" label="1">一行两个</el-radio>
                <el-radio style="width:55px" v-model="styles.type" label="2">一行三个</el-radio>
                <el-radio style="width:55px" v-model="styles.type" label="3">左一右二</el-radio>
                <el-radio style="width:55px" v-model="styles.type" label="4">上一下二</el-radio>
              </div>

              <div v-show="styles.type==1" class="margic-style-one">
                <div @click="getImage(1)" :class="[curr==1?'curr-one':'']">
                  <el-image
                    v-if="styles.imgList1[0].img!=''"
                    style="width: 176px; height: 176px"
                    :src="styles.imgList1[0].img"
                    fit="cover"
                  ></el-image>
                  <span v-else>宽度375px</span>
                </div>
                <div @click="getImage(2)" :class="[curr==2?'curr-one':'']">
                  <el-image
                    v-if="styles.imgList1[1].img!=''"
                    style="width: 176px; height: 176px"
                    :src="styles.imgList1[1].img"
                    fit="cover"
                  ></el-image>
                  <span v-else>宽度375px</span>
                </div>
              </div>
              <div v-show="styles.type==2" class="margic-style-two">
                <div @click="getImage(1)" :class="[curr==1?'curr-one':'']">
                  <el-image
                    v-if="styles.imgList1[0].img!=''"
                    style="width: 121px; height: 121px"
                    :src="styles.imgList1[0].img"
                    fit="cover"
                  ></el-image>
                  <span v-else>宽度250px</span>
                </div>
                <div @click="getImage(2)" :class="[curr==2?'curr-one':'']">
                  <el-image
                    v-if="styles.imgList1[1].img!=''"
                    style="width: 121px; height: 121px"
                    :src="styles.imgList1[1].img"
                    fit="cover"
                  ></el-image>
                  <span v-else>宽度250px</span>
                </div>
                <div @click="getImage(3)" :class="[curr==3?'curr-one':'']">
                  <el-image
                    v-if="styles.imgList1[2].img!=''"
                    style="width: 121px; height: 121px"
                    :src="styles.imgList1[2].img"
                    fit="cover"
                  ></el-image>
                  <span v-else>宽度250px</span>
                </div>
              </div>
              <div v-show="styles.type==3" class="margic-style-three">
                <div @click="getImage(1)" :class="[curr==1?'curr-one':'']">
                  <el-image
                    v-if="styles.imgList1[0].img!=''"
                    style="width: 176px; height: 356px"
                    :src="styles.imgList1[0].img"
                    fit="cover"
                  ></el-image>
                  <span v-else>375x750像素或同等比例</span>
                </div>
                <div>
                  <div @click="getImage(2)" :class="[curr==2?'curr-one':'']">
                    <el-image
                      v-if="styles.imgList1[1].img!=''"
                      style="width: 176px; height: 176px"
                      :src="styles.imgList1[1].img"
                      fit="cover"
                    ></el-image>
                    <span v-else>375x375像素或同等比例</span>
                  </div>
                  <div @click="getImage(3)" :class="[curr==3?'curr-one':'']">
                    <el-image
                      v-if="styles.imgList1[2].img!=''"
                      style="width: 176px; height: 176px"
                      :src="styles.imgList1[2].img"
                      fit="cover"
                    ></el-image>
                    <span v-else>375x375像素或同等比例</span>
                  </div>
                </div>
              </div>
              <div v-show="styles.type==4" class="margic-style-four">
                <div @click="getImage(1)" :class="[curr==1?'curr-one':'']">
                  <el-image
                    v-if="styles.imgList1[0].img!=''"
                    style="width: 356px; height: 176px"
                    :src="styles.imgList1[0].img"
                    fit="cover"
                  ></el-image>
                  <span v-else>750x375像素或同等比例</span>
                </div>
                <div>
                  <div @click="getImage(2)" :class="[curr==2?'curr-one':'']">
                    <el-image
                      v-if="styles.imgList1[1].img!=''"
                      style="width: 176px; height: 176px"
                      :src="styles.imgList1[1].img"
                      fit="cover"
                    ></el-image>
                    <span v-else>375x375像素或同等比例</span>
                  </div>
                  <div @click="getImage(3)" :class="[curr==3?'curr-one':'']">
                    <el-image
                      v-if="styles.imgList1[2].img!=''"
                      style="width: 176px; height: 176px"
                      :src="styles.imgList1[2].img"
                      fit="cover"
                    ></el-image>
                    <span v-else>375x375像素或同等比例</span>
                  </div>
                </div>
              </div>
              <!-- ------------------ -->
              <div class="add-pic">
                <div>
                  <upLoadImage :v="styles.imgList1[curr-1]" :height="65"></upLoadImage>
                </div>
                <div>
                  <upLoadUrl :v="styles.imgList1[curr-1]" :width="200"></upLoadUrl>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="activeNames2">
      <el-collapse-item title="内容样式" name="2">
        <ul class="content-list">
          <li>
            <span>高度：</span>
            <div>
              <edgeSetting v-model="styles.height" unit="px" :min='120' :max="400" :init="Number(styles.height)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>上间距：</span>
            <div>
              <edgeSetting v-model="styles.marginTop" unit="px" :max="50" :init="Number(styles.marginTop)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>下间距：</span>
            <div>
              <edgeSetting v-model="styles.marginBottom" unit="px" :max="50" :init="Number(styles.marginBottom)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>左右间距：</span>
            <div>
              <edgeSetting v-model="styles.marginLR" unit="px" :max="50" :init="Number(styles.marginLR)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>圆角：</span>
            <div>
              <edgeSetting v-model="styles.circle" unit="px" :max="50" :init="Number(styles.circle)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>内部间距：</span>
            <div>
              <edgeSetting v-model="styles.shifting" unit="px" :max="15" :init="Number(styles.shifting)"></edgeSetting>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import upLoadImage from "../../comm/upLoadImage";
import upLoadUrl from "../../comm/uploadUrl";
import edgeSetting from "../../comm/edgeSetting";
export default {
  name: "magicChange",
  data() {
    return {
      activeNames1: "1",
      activeNames2: "2",
      curr: 1,
    };
  },
  created() {},
  mounted() {},
  computed: {
    ...mapState(["list", "currentId"]),
    styles() {
      return this.list[this.currentId].styles;
    },
  },
  watch: {
    "styles.type"() {
      this.curr = 1;
    },
  },
  components: {
    upLoadImage,
    upLoadUrl,
    edgeSetting
  },
  methods: {
    getImage(num) {
      this.curr = num;
    },
  },
};
</script>


<style lang="less" scoped>
@import url("../../../assets/css/base.less");
/deep/.el-input-group__append,
.el-input-group__prepend {
  padding: 0 10px;
}
.margic-type {
  margin-bottom: 20px;
}
.line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.curr-one {
  border: 1px solid @mainColor !important;
  background-color: rgba(45, 140, 240, 0.2);
  color: @mainColor;
}
.margic-style-one {
  display: flex;
  > div {
    width: 180px;
    height: 180px;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}
.margic-style-two {
  display: flex;
  > div {
    width: 125px;
    height: 125px;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}
.margic-style-three {
  display: flex;
  > div:nth-of-type(1) {
    width: 180px;
    height: 360px;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    > span {
      display: block;
      width: 90px;
    }
  }
  > div:nth-of-type(2) {
    > div {
      width: 180px;
      height: 180px;
      border: 1px solid #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      > span {
        display: block;
        width: 90px;
      }
    }
  }
}
.margic-style-four {
  > div:nth-of-type(1) {
    width: 360px;
    height: 180px;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    > span {
      display: block;
      width: 90px;
    }
  }
  > div:nth-of-type(2) {
    display: flex;
    > div {
      width: 180px;
      height: 180px;
      border: 1px solid #eee;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      > span {
        display: block;
        width: 90px;
      }
    }
  }
}
.add-pic {
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #f7f7f7;
  padding: 10px;
  > div:nth-of-type(1) {
    margin-right: 10px;
  }
}
</style>
